<template>
    <div class="l-from-body" >
        <el-form :model="formData" :rules="rules" size="mini"  ref="form" label-width="60px" >
            <el-col :span="24">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="formData.name"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="SQL" prop="sql" >
                    <el-alert
                        title="@param 与主表关联参数值，比如 where id = @param;"
                        type="info"
                        :closable="false"
                        style="margin-bottom: 8px;"
                        >
                    </el-alert>
                    <div class="l-rblock" style="height:200px;border:1px solid #dcdfe6;border-radius:4px;overflow: hidden;" >
                        <l-code-mirror v-model="formData.sql" mode="text/x-sql" ></l-code-mirror>
                    </div>
                </el-form-item>       
            </el-col>
        </el-form>
    </div>
</template>
<script>
export default {
    data(){
        return {
            pOptions:[],
            formData:{
                name:'',
                sql:''
            },
            rules: {
                name: [
                    { required: true, message: 'please enter' }
                ],
                sql: [
                    { required: true, message: 'please enter' }
                ]
            }
        };
    },
    created () {
    },
    methods:{
        resetForm(){
            this.formData.id = ''
            this.formData.relationField = ''
            this.formData.type = ''
            this.$refs.form && this.$refs.form.resetFields()
        },
        resetSql(){
            this.formData.sql = ' '
        },
        // 校验表单
        validateForm(){
            return this.$formValidateWraper(this.$refs.form)
        },
        setForm(data){
            this.formData = this.$deepClone(data)
        },
        getForm(){
            return this.$deepClone(this.formData)
        }
    }
}
</script>
